ZITADELとReactでログイン機能付きデモアプリを作ってみる（ZITADEL編）

こんにちは。小売流通ソリューション部Devチームの中島です。

今回はふと思い立ったので、ZITADELとReactでログイン機能付きデモアプリを作ってみようと思います。

書いてたら長くなってしまったのでZITADEL編とReact編を分けました。 今回はZITADEL編です。

React側は近日公開する次回の記事をお待ちください。

作るアプリ

Reactアプリ側でログインボタンを押すとZITADELのログイン画面にリダイレクトされて、ZITADELでログイン処理をするとReactアプリ側に再度リダイレクトされて、ログイン状態になる、というよくあるOIDCのフローでログインできるアプリを作ります。

ZITADEL

ZITADELはAuth0やKeycloakのように、アイデンティティ管理、アクセス管理の機能を提供するプロダクトです （公式曰く、Auth0の使いやすさとKeycloakのカスタマイズ性を兼ね備えているそうです）。 OpenID Connect, OAuth2.xへの対応はもちろん、マルチテナントのユーザー管理機能やパスワードレス認証機能も用意されています。 Keycloakのように、OSSとして使うことも、クラウド版でSaaSとして使うこともできます。

ZITADELの起動と初期管理者アカウントでのログイン

起動

今回はdockerを使ってセットアップしたいと思います。 公式ドキュメントからdocker-compose.yamlファイルを取得して、立ち上げてみます。

$ docker-compose up -d

コンテナが起動したら、http://localhost:8080/ にアクセスして、以下のログインページが表示されればOKです。

初期管理者アカウントでログイン

公式ドキュメントに記載の以下usernameを入力して「次へ」をクリックします。

• username: zitadel-admin@zitadel.localhost

パスワード入力画面に遷移するので、以下の初期passwordを入力して、「次へ」をクリックします。

• password: Password1!

二要素認証のセットアップ画面に遷移しますが、今回は設定せず「スキップ」します。

以下パスワード変更画面に遷移するので、旧パスワードに先ほど入力した初期パスワードを入力し、新パスワード・新パスワードの確認には入力欄下部に記載のパスワードポリシーに沿った任意のパスワードを入力して「次へ」をクリックします。

パスワード変更完了画面に遷移するので「次へ」をクリック。

無事コンソールにログインができました！

ZITADELの設定

それではZITADELを設定していきます。 ミニマムな設定としてOrganization、Project、Application、Userをそれぞれ作成していきます。

Organizationはテナントの概念に相当するもので、Organizationの中にProject、Application、Userが存在するようなイメージとなります。

ZITADELには複数のOrganizationを作成でき、またOrganizationの中に複数のProject、Application、Userを作成できます。

今回はそれぞれ一つずつ作成することにしましょう。

Organizationの作成

まずはテナントに相当するOrganizationを作成します。

コンソールの「ZITADEL」の表記の右側のメニューを開き、「NewOrganization」をクリックします。

Organization作成画面が表示されるので、今回は「SampleOrganization」と入力して「Create」をクリックします。

Organizationの作成ができました！

Projectの作成

先ほど「NewOrganization」を選択したメニューで「SampleOrganization」を選択した状態で、「Projects」タブを開きます。

CreateNewProjectをクリックすると、Projectの名前を入力する画面が表示されるので、「SampleProject」と入力して「Continue」をクリックします。

Projectの作成ができました！

Applicationの作成

先ほど作成した「SampleProject」の画面の「APPLICATIONS」の「New」をクリックします。

「Name」に「SampleApplication」、「TYPE OF APPLICATION」は今回はReactアプリなので「WEB」を選択した状態で、「Continue」をクリックします。

「PKCE」を選択した状態で「Continue」をクリックします。

※ PKCEについての説明は省略しますが、詳しく知りたい方はRFC7636を参照。

Redirect URIの設定画面が表示されるので、以下の通り入力して「Continue」をクリックします。

※あとで作成するReact側のURIです。

• Redirect URIs：http://localhost:5173/authentication/callback
• Post Logout URIs：http://localhost:5173/logout

最後に作成内容を確認して「Create」をクリックします。

Client IDが表示されるので、控えておきます（React側の設定で使います）。

Applicationの作成が完了しました！

Userの作成

最後にUserを作成します。Usersタブを開いて、「New」をクリックします。

以下のように入力してテストユーザーを作成します。

• email：example@example.com
• User Name：testuser
• First Name：test
• Last Name:user
• Password：パスワードポリシーに沿った任意のパスワード
• Confirm Password：パスワードと同じ

Userの作成が完了しました！

ここまででZITADEL側の設定は完了です！

おわりに

ZITADEL側の基本的な操作感はKeycloakとそんなに変わらないかなと感じました。 パスワードレス認証の設定などその他の細かい設定の操作感についてはまた別途検証してみたいと思います。

次回はReactアプリを作成して、ZITADELで認証処理をしてログインできる機能を作成してみましょう。

それでは。

参考

https://qiita.com/naka_kyon/items/7831bcf97343886d443c